<template>
    <div 
        class="page-wrapper"
        :style="{
            transition:'all 0.5s ease-in',
            backgroundRepeat:'no-repeat',
            backgroundImage:`url(${ getFullPath( ( data[middleIndex] || {}  ).backgroundImagePath ) })`,
            backgroundSize:'cover'
        }"
    >
        <div class="page-content">
            <div class="follow-container">
                <!-- <el-button @click="handleToggle" style="position:absolute; left:100px; top:100px; z-index:10; ">change</el-button> -->
                <div class="follow-top">
                    <div class="slider-container">
                        <div class="slider-wrapper">
                            <div
                                v-for="(item, index) in data"
                                :key="item.contentId"
                                class="slider-item"
                                :style="{
                                    transform:`translateX(${ ( index - middleIndex ) * 100 }%) scale(${ index === middleIndex ? 1.3 :1 })`,
                                    opacity:`${ 1 - ( Math.abs(index - middleIndex) / 10 ) * 2  }`
                                }"
                            >
                                <img :src="getFullPath(item.iconPath)" />
                            </div>
                            <Transition name="fade">
                                <div class="slider-text" :key="( data[middleIndex] || {} ).tittle">{{ ( data[middleIndex] || {} ).tittle }}</div>
                            </Transition>
                        </div>
                    </div>
                </div>
                <div class="follow-bottom">
                    <div class="content-wrapper">
                        <div ref="prevRef" class="content-bg prev" :style="{ backgroundImage:`url(${ getFullPath(prevItem.interfacePath) })` }" ></div>
                        <div ref="nextRef" class="content-bg next" :style="{ backgroundImage:`url(${ getFullPath( ( data[middleIndex] || {} ).interfacePath ) })`}"></div>   
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { getFullPath, getContentList } from '@/api/global.js';
    import { watch, ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
    const prevRef = ref(null);
    const nextRef = ref(null);
    const data = ref([]);
    let middleIndex = 0;
    const prevItem = ref({});
    const timer = ref(null);
    const contentTimer = ref(null); 
    const handleToggle = ()=>{
        clearTimeout(contentTimer.value);
        let arr = [...data.value];
        let firstEle = null;
        for(let i = 0; i < arr.length; i++){
            if ( i === 0 ) {
                firstEle = arr[0];
            }
            if ( i === arr.length - 1 ) {
                arr[i] = firstEle;
            } else {
                arr[i] = arr[i+1];
            }
        }
        // 更新底部跟随变化的内容区
        data.value = arr;
        prevRef.value.classList.add('active');
        nextRef.value.classList.add('active');
        contentTimer.value = setTimeout(()=>{
            prevItem.value = data.value[middleIndex];        
            prevRef.value.classList.remove('active');
            nextRef.value.classList.remove('active');
        }, 700);
    }
    const fetchContentList = ()=>{
        getContentList({ page:1, pageSize:20, contentType:'首页产品轮播' })
        .then(res=>{
            if ( res.data.code === 200 ) {
                data.value = res.data.data;   
                middleIndex = Math.floor(res.data.data.length / 2);
                prevItem.value = res.data.data[middleIndex];
                timer.value = setInterval(()=>{
                    handleToggle();
                }, 4000)
            }
        })
    }
    onMounted(()=>{
        fetchContentList();
    })
    onBeforeUnmount(()=>{
        clearInterval(timer.value);
        clearTimeout(contentTimer.value);
    })
</script>
<style scoped>
    @import './style.css';
</style>